<template>
  <div class="rateRank">
    <van-nav-bar 
      title="服务评价"
      fixed  
      left-arrow 
      @click-left="onClickLeft" 
    />
    <van-list class="rateList normalList"
      :finished="true"
      finished-text="没有更多了"
    >
      <van-panel 
        v-for="(item, index) in rateList" 
        :key="index" 
        :title="item.loan + '-' + item.name" 
        :desc="'申请额度：' + item.price + '万元'" 
      >
        <div class="detail">
          <div v-text="'申请日期: ' + item.createTime"></div>
          <div v-text="'申请利率: ' + item.rate + '%'"></div>
          <div v-text="'申请年限: ' + item.year + '年'"></div>
        </div>
        <div slot="footer">
          <div class="rateArea" v-if="item.rateRank == 0">
            <span>
              评价：
              <van-rate v-model="starList[index]" />
            </span>
            <van-button 
              size="small" 
              type="danger" 
              @click="rateSubmit(item.id, index)"
              :loading="appLoading"
              loading-text="加载中"
            >
              提交评价
            </van-button>
          </div>
          <div class="rateArea" v-else>
            <span>
              已评价：
              <van-rate v-model="item.rateRank" readonly />
            </span>
          </div>
        </div>
      </van-panel>
    </van-list>
  </div>
</template>

<script>
  import { NavBar, List, Panel, Rate, Button } from 'vant';
  import { mapState } from 'vuex';
  import { mixins } from '../../common/mixins';

  export default {
    name: 'rateRank',
    components: {
      [NavBar.name]: NavBar,
      [List.name]: List,
      [Panel.name]: Panel,
      [Rate.name]: Rate,
      [Button.name]: Button,
    },
    mixins: [mixins],
    data () {
      return {
        rateList: [],
        starList: []
      }
    },
    computed: {
      ...mapState ([
        'appLoading' // 将 this.appLoading 映射为 this.$store.state.appLoading
      ]),
    },
    created () {
      this.$api.other.getRateList( (res)=>{
        this.rateList = res.data;
        this.rateList.forEach(item => {
          this.starList.push(item.rateRank);
        });
      })
    },
    methods: {
      rateSubmit (id, index) {
        if(this.starList[index] == 0){
          this.$UIplugins.message({message: '请先评分，再提交'});
          return false;
        }else{
          let reqParams = {
            id: id,
            rateRank: this.starList[index]
          };
          this.$api.other.setRate( reqParams, (res)=>{
            this.rateList[index].rateRank = this.starList[index];
            this.$UIplugins.message({message: '评价成功！'});
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .rateRank {
    .rateList{
      margin-top:46px;
      .rateArea{
        min-height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        span{
          display: flex;
          align-items: center;
        }
      }
    }
  }
</style>
